<template>
  <view class="pay-result">
    <u-navbar
      title="支付结果"
      placeholder
      bgColor="#F8F8F8"
      @leftClick="
        $jump('/pages/technician/technician', { method: 'switchTab' })
      "
    >
      <!-- <view slot="left"> </view> -->
    </u-navbar>
    <image
      src="https://kindoucloud.com:8077/api/mongoFile/previewImage/example/65b75de58253fd140d862d3c"
      mode=""
    />
    <view class="tips">支付成功</view>
    <view class="sub-tips">可以在个人中心“我的订单”查看</view>
    <view class="btn-content">
      <view
        class="btn"
        @click="
          $jump('/subPages/user/order/await-service', { query: { orderId } })
        "
      >
        查看订单
      </view>
      <view
        class="cancel"
        @click="$jump('/pages/index/index', { method: 'switchTab' })"
      >
        返回首页
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      orderId: "",
    };
  },
  onLoad(options) {
    this.orderId = options.orderId;
  },
};
</script>

<style lang="scss" scoped>
%btn {
  font-size: 38rpx;
  width: 400rpx;
  height: 88rpx;
  background: #c94117;
  border-radius: 44rpx;
  line-height: 88rpx;
  text-align: center;
  margin-bottom: 50rpx;

  &:active {
    transform: scale(0.98);
  }
}
.pay-result {
  text-align: center;

  > image {
    width: 144rpx;
    height: 144rpx;
    margin: 100rpx 0 40rpx;
  }

  .tips {
    font-size: 36rpx;
    font-weight: bold;
    color: #333333;
    margin-bottom: 30rpx;
  }

  .sub-tips {
    font-size: 28rpx;
    color: #333;
    margin: 20rpx 0 118rpx;
  }

  .btn-content {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    .btn {
      color: #fff;
      @extend %btn;
    }

    .cancel {
      background: #e3e3e3;
      color: #999999;
      @extend %btn;
    }

    > view {
    }
  }
}
</style>
